<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <script src="../js/vue.js"></script>
<!--    基于 promise 技术的 专门用于 Ajax 调用的js-->
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--    QueryBooksServlet,BookDao-->
</head>
<body>

<div id="app">
    书名:<input v-model="name">
    出版社:<input v-model="press">
    出版日期:<input v-model="date">
    <button @click="query">查询</button>
    <table style="width: 100%" border="1">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>作者</th>
            <th>库存</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        <tr v-for=" book in list ">
            <td>{{book.id}}</td>
            <td>{{book.bookname}}</td>
            <td>{{book.bookpress}}</td>
            <td>{{book.pressdate}}</td>
            <td>{{book.bookauthor}}</td>
            <td>{{book.bookcount}}</td>
            <td align="center"><img :src="book.bookimage" height="100px"></td>
            <td><a :href="'modify.html#' + book.id">修改</a></td>
        </tr>
    </table>
</div>
<script>
    var vue = new Vue({

        el : "#app",
        data : {
            list : [],
            name : "",
            press : "",
            date : "",
        },
        // 当 vue 对象创建好之后，立即执行的代码
        created (){
            this.query();
        },
        methods : {
            query(){
                axios({
                    url : "../../QueryBookServlet",
                    params:{
                        name : this.name,
                        press: this.press,
                        date: this.date,
                    }
                }).then( (res) => {
                    this.list = res.data;
                });
            }
    }
    });
</script>
</body>
</html>